<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:wicket="http://wicket.sourceforge.net/">
<body>
	<wicket:extend>
	<div wicket:id="tab-container">
			<ul>
	           <li class="ui-tabs-nav-item"><a href="#tab-1"><span>Simple Sortable</span></a></li>
	           <li class="ui-tabs-nav-item"><a href="#tab-2"><span>Ajax Sortable #1</span></a></li>
	           <li class="ui-tabs-nav-item"><a href="#tab-3"><span>Ajax Sortable #2</span></a></li>
	       	</ul>
	       <div id="tab-1">
				<div class="demotitle">Demo</div>
				<div class="democontainer" style="height:auto;">
					<ul wicket:id="sortable0">
						<li>Dog</li>
						<li>Cat</li>
						<li>Bird</li>
						<li>Crocodile</li>
						<li>Murloc</li>
					</ul>
				</div>
			</div>
			<div id="tab-2">
				<div class="demotitle">Demo</div>
				<div class="democontainer" style="height:auto;">
					<ul wicket:id="sortable1">
						<li wicket:id="item1">
							<span wicket:id="content1">content</span>
						</li>
					</ul>
					<br>
					<span>Ajax behavior output : </span><span wicket:id="output1"></span>
				</div>
			</div>
			<div id="tab-3">
				<div class="demotitle">Demo</div>
				<div class="democontainer" style="height:auto;">
					<div style="float: left; min-height:150px;">
						<ul wicket:id="sortable2">
							<li wicket:id="item2">
								<span wicket:id="content2">content</span>
							</li>
						</ul>
					</div>
					<div style="float: left; margin-left: 20px; min-height:150px;">
						<ul wicket:id="sortable3">
							<li wicket:id="item3">
								<span wicket:id="content3">content</span>
							</li>
						</ul>
					</div>
					<br style="clear: both;">
					<span>Ajax behavior output : </span><span wicket:id="output2"></span>
				</div>
			</div>
		</div>
		<div class="codesample">
			<div class="codetitle">Source Code</div>
			<div class="codecontainer">
				<div class="section">
					<h5>Html</h5>
					<pre class="ln-">
						<code wicket:id="chili1" class="html"></code>
					</pre>
				</div>
				<div class="section">
					<h5>Java</h5>
					<pre class="ln-">
						<code wicket:id="chili2" class="java"></code>
					</pre>
				</div>
			</div>
		</div>
	</wicket:extend>
</body>
</html>